<template>
  <DFModal
    ref="basicModalRef"
    class="basicModal_color"
    style="width: 1000px"
    @register="modalRegister"
  >
    <template #default>
      <div class="db-container">
        <div
          v-for="(item, key) in typesList"
          :key="key"
          class="db-card"
          :style="{ 'background-color': item.color }"
          @click="onUpdate(item.value)"
        >
          <!-- <div class="db-name" ></div> -->
        </div>
      </div>
    </template>
    <template #action>
      <div>
        <n-space>
          <n-button @click="closeModal">{{ $t('common.button.close') }}</n-button>
        </n-space>
      </div>
    </template>
  </DFModal>
</template>

<script lang="ts" setup>
  import { DFModal, useModal } from '@/components/DFModal';

  import { useMixins } from '@/hooks/useMixins';

  const { t } = useMixins();

  const basicModalRef: any = ref(null);

  type Props = {
    printUniColorMap?: any;
    isPrint?: Boolean;
    parentData?: any;
  };

  const props = withDefaults(defineProps<Props>(), {
    printUniColorMap: () => null,
  });
  // const sourceTypeList: any = inject('sourceTypeList', []);
  const typesList: any = ref([]);

  const [modalRegister, { openModal, closeModal }] = useModal({
    width: 1300,
  });

  const openModalFn = async () => {
    if (typesList && typesList.value) {
      if (!typesList.value.length && props.printUniColorMap) {
        for (const i in props.printUniColorMap) {
          typesList.value.push({
            color: props.printUniColorMap[i],
            value: i,
          });
        }
      }
    }

    // langtodo
    openModal(null, t('productionCenter.table.colorSelect'));
  };
  const emit = defineEmits(['chooseData', 'register']);

  const onUpdate = (val) => {
    emit('chooseData', val);

    closeModal();
  };
  defineExpose({ openModalFn });
</script>

<style lang="less" scoped>
  .db-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .db-card {
    width: 225px;
    height: 160px;
    background: #fff;
    border-radius: 14px;
    margin: 10px 0;
    cursor: pointer;
    // margin: 0 10px 16px 10px;
    // margin-bottom: 16px;
    // margin-right: 20px;
    // margin-left: 16px;
    &:hover {
      box-shadow: 0px 0px 5px 1px #e5e5e5;
    }
    img {
      width: 100%;
      height: 102px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .db-name {
      width: 225px;
      height: 160px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      // padding: 8px 12px;
    }
  }
</style>

<style lang="less">
  .basicModal_color {
    .n-dialog__title {
      padding: 16px 24px 10px 24px;
      background: linear-gradient(141deg, #353132 0%, #676466 100%) !important;
      border-radius: 4px 4px 0 0;
      .cursor-move {
        color: rgb(255 255 255 / 78%);
      }
    }
    .n-dialog__content {
      background: linear-gradient(141deg, #272323 0%, #353132 51%, #4a4647 76%, #676466 100%);
    }
    .n-dialog__action {
      background: linear-gradient(141deg, #272323 0%, #353132 51%, #4a4647 76%, #676466 100%);
    }
    .n-button {
      background-color: rgba(255, 255, 255, 0.2);
      color: rgb(255 255 255 / 78%);
    }
    .n-base-icon svg {
      // display: none;
      color: #fff;
    }
  }
</style>
